<template>
	<view class="my-map">
		<view class="search">
			<view class="addr">
				广州
				<image src="../static/xia.jpg" mode=""></image>
			</view>
			<image src="../static/搜索.png" mode=""></image>
			<input type="text" placeholder="请输入你的详细地址" v-model="address" />
		</view>
		<map id="myMap" style="width: 100%; height: 280px;" :latitude="latitude" :longitude="longitude" :markers="markers"
		 show-location></map>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				latitude: 23.099994,
				longitude: 113.324520,
				markers: [{
					id: 1,
					latitude: 23.099994,
					longitude: 113.324520,
					name: 'T.I.T 创意园'
				}],
			}
		},
		onLoad() {
			let self = this
			// 获取当前map
			mapCtx = wx.createMapContext('myMap')
			self.getAuthorizeInfo()
		},
		methods: {
			getAuthorizeInfo() {
				uni.authorize({
					scope: 'scope.userLocation',
					success() { // 允许授权
						self.getLocationInfo();
					},
					fail() { // 拒绝授权
						self.openConfirm();
						console.log("你拒绝了授权，无法获得周边信息")
					}
				})
			},
			getLocationInfo() {
				debugger
				uni.getLocation({
					type: 'wgs84',
					success(res) {
						console.log(res, "当前位置");
						// 移动到当前位置
						self.toLocation(res)
						self.latitude = res.latitude;
						self.longitude = res.longitude;
					}
				});
			},
			toLocation: function(obj) {
				// 改变地图中心位置
				mapCtx.moveToLocation(obj)
				// 移动标记点并添加动画效果
				mapCtx.translateMarker({
					markerId: 1,
					autoRotate: true,
					duration: 100,
					destination: {
						latitude: obj.latitude,
						longitude: obj.longitude,
					},
					animationEnd() {
						console.log('animation end')
					}
				})
			},
		}
	}
</script>

<style>
</style>
